<!doctype html>
<html lang="zh">
<head>
    <title>socket测试</title>
</head>

<body>

<div>
    <label for="door1">门1</label>
    <input id="door1" name="door1" value="52 52 01 01 00 02 05 00 26 76">
    <button onclick="openDoor1()">开门1指令</button>
</div>
<div>
    <label for="door2">门2</label>
    <input id="door2" name="door2" value="52 52 01 01 00 02 05 01 36 57">
    <button onclick="openDoor2()">开门2指令</button>
</div>

<div>
    <label for="door3">门3</label>
    <input id="door3" name="door3" value="52 52 01 01 00 02 05 02 06 34">
    <button onclick="openDoor3()">开门3指令</button>
</div>

<div>
    <label for="door4">门4</label>
    <input id="door4" name="door4" value="52 52 01 01 00 02 05 03 16 15">
    <button onclick="openDoor4()">开门4指令</button>
</div>

<div>
    <label for="doorStatus">门4</label>
    <input id="doorStatus" name="doorStatus" value="52 52 01 01 00 01 40 F0 62">
    <button onclick="getDoorStatus()">读取门状态</button>
</div>

<div id="receiveMsg"></div>

<script type="application/javascript">

    window.CHAT = {
        socket: null,
        init: function () {
            <!--判断浏览器是否支持 websocket-->
            if (window.WebSocket) {
                <!--连接服务器websocket IP+端口号 ／ws是服务器WebSocketServerProtocolHandler添加的-->
                CHAT.socket = new WebSocket("ws://127.0.0.1:8080/ws");
                CHAT.socket.onopen = function () {
                    console.log("连接建立成功...");
                }
                CHAT.socket.onclose = function () {
                    console.log("连接关闭...");
                }
                CHAT.socket.onerror = function () {
                    console.log("发生错误...");
                }
                CHAT.socket.onmessage = function (e) {
                    console.log("接受到消息：" + e.data);
                    var receiveMsg = document.getElementById("receiveMsg");
                    var html = receiveMsg.innerHTML;
                    receiveMsg.innerHTML = html + "<br/>" + e.data;
                }
            } else {
                alert("浏览器不支持websocket协议...");
            }
        },
        <!--onclick事件触发-->
        chat: function () {

            <!--获取消息,发送消息-->
            var msg = document.getElementById("msgContent");
            CHAT.socket.send(msg.value);
        }
    };

    <!--初始化方法-->
    CHAT.init();

    // var socket = new WebSocket("ws://192.168.0.38:8080");
    // if (window.WebSocket) {
    //     socket = window.WebSocket("ws://192.168.0.38:8080")
    // }

    // socket.on('open',function(event){
    //     tsocket.send('OpenBarScanner')
    // });

    // CHAT.socket.onopen = function(evt) {
    //     console.log('open = ', evt);
    //     console.log("Connection open ...");
    //     socket.send("Hello WebSockets!");
    // };
    //
    // CHAT.socket.onmessage = function(evt) {
    //     console.log('message = ', evt);
    //     console.log( "Received Message: " + evt.data);
    //     // socket.close();
    // };
    //
    // CHAT.socket.onclose = function(evt) {
    //     console.log('close = ', evt);
    //     console.log("Connection closed.");
    // };

    function openDoor1() {
        const inst = "52 52 01 01 00 02 05 00 26 76";
        CHAT.socket.send(inst);
    }

    function openDoor2() {
        const inst = "52 52 01 01 00 02 05 01 36 57";
        CHAT.socket.send(inst);
    }

    function openDoor3() {
        const inst = "52 52 01 01 00 02 05 02 06 34";
        CHAT.socket.send(inst);
    }

    function openDoor4() {
        const inst = "52 52 01 01 00 02 05 03 16 15";
        CHAT.socket.send(inst);
    }

    function getDoorStatus() {
        const inst = "52 52 01 01 00 01 40 F0 62";
        CHAT.socket.send(inst);
    }
</script>
</body>
</html>